GridSplitter for UWP Quick Start
In This Topic
In this Quick Start, you create a new Universal Windows application in Visual Studio, set up a Grid, and add the C1GridSplitter control to your application.
Complete these steps:
- Create a new Universal Windows application in Visual Studio:
- Select File | New | Project from the File menu. The New Project dialog box will open.
- Select Templates | Visual C# | Windows | Universal. From the templates list, select Blank App (Universal Windows).
- Give your project a Name, and select OK. Your new project will open.
- Locate the References folder in the Solution Explorer. Right-click the folder and select Add Reference.
- In the Reference Manager, expand Universal Windows and select Extensions; you should see the UWP assemblies in the center pane.
- Select C1.UWP.dll from the center pane.
- Select OK to add the reference to your application.
- Locate the <Grid> </Grid> tags in your MainPage.xaml file.
- Add the following Grid.RowDefinitions and Grid.ColumnDefinitions to your application. The XAML markup should resemble the following:
XAML |
Copy Code
|
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>
|
- Place your cursor below the closing </Grid.ColumnDefinition> tag. Locate the C1GridSplitter control in your Visual Studio Toolbox, and add two C1GridSplitter controls to your application.
- Edit your GridSplitter controls so that they resemble the following XAML markup:
XAML |
Copy Code
|
<c1:C1GridSplitter Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Top" Height="16" ShowsPreview="True" />
<c1:C1GridSplitter Grid.RowSpan="2" Grid.Column="1" HorizontalAlignment="Left" Width="16" />
|
Note that you set the Grid Row and Column positions and the Vertical or Horizontal Alignment.
- Directly below the second C1GridSplitter control, add a general Rectangle control from your Toolbox and set the Fill property to "Red":
XAML |
Copy Code
|
<Rectangle Fill="Red"/>
|
- Press F5 or start debugging to run your application. Moving the horizontal and vertical GridSplitters will enlarge or minimize the red Rectangle: